<template>
  <div class="home">
    <Header></Header>
    <el-container class="content">
      <Menu></Menu>
      <!-- <div>
        菜单
        <el-aside width=200px>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            
             background-color="#545c64"
             text-color="#fff"
              active-text-color="#ffd04b">
          
            <template v-for="(item, index) in menus">
              <el-submenu :index="index+''" :key='index' v-if='!item.hidden'>
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group v-for="(child,index) in item.children" :key='index'>
                <el-menu-item :index="child.path">{{child.name}}</el-menu-item>
              </el-menu-item-group>

            </el-submenu>

            </template>
          </el-menu>
        </el-aside>
      </div> -->
      <el-main>
        <el-card>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index">
            {{item.name}}
            </el-breadcrumb-item>

          </el-breadcrumb>
        </el-card>
        <div class="cont">
          <!-- 路由展示坑 -->
          <router-view></router-view>

        </div>
   
        <Footer></Footer>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//头部组件
import Header from "./common/Header.vue";
//底部组件
import Footer from "./common/Footer.vue";
//引入菜单组件
import Menu from "./common/Menu.vue";
export default {
  components: {
    Header,
    Footer,
    Menu,
  },
  name: "home",
  data() {
    return {};
  },
  created() {
    // console.log(this.$route);
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.home {
  .content {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 60px;
    .cont{
      margin: 20px 0;
    }
  }
}
</style>
